// 定义一个名为 DepartmentForm 的对象，用作 Vue 组件
const DepartmentForm = {
    // 组件名称
    name: 'DepartmentForm',
    // 组件模板
    template: `  
    <div v-if="visible" class="modal">  
      <div class="modal-overlay" @click="close"></div>  
      <div class="modal-content">  
        <header class="modal-header">  
          <h2>{{ formData.id? '编辑部门信息' : '添加部门信息' }}</h2>  
          <button class="close-button"  @click="close">×</button> <!-- 右侧 -->
        </header>  
        <form @submit.prevent="submitForm">  
          <input type="hidden" v-model="formData.id">  

          <!-- 表单输入字段 -->
          <div class="form-group">  
            <label for="id">部门编号:</label>  
            <input type="text" id="id" v-model="formData.id" required>  
          </div>  
          <div class="form-group">  
            <label for="name">部门名称:</label>  
            <input type="text" id="name" v-model="formData.name" required>  
          </div>  
          <div class="form-group">  
            <label for="manager">部门负责人:</label>  
            <input type="text" id="manager" v-model="formData.manager" required>  
          </div>  
          <div class="form-group submit">  
            <input type="submit" :value="formData.id? '更新部门信息' : '添加部门信息'">  
          </div>  
        </form>  
      </div>  
    </div>  
  `,
    // 局部注册组件
    components: {
        // 如果部门表单中也需要文件上传等组件，在这里注册，暂时未用到所以先空着
    },

    // 组件属性
    props: {
        // 控制表单弹窗的显示与隐藏
        visible: {
            type: Boolean,
            default: false
        },
        // 从父组件传入的部门数据
        departmentData: {
            type: Object,
            default: () => ({})
        }
    },
    // 自定义事件
    emits: ['update:visible','submit'],
    // 组件设置函数
    setup(props, { emit }) {
        // 表单数据的初始值
        const initialValue = {
            id: '',
            name: '',
            manager: ''
        }

        // 使用 Vue.ref 创建响应式表单数据对象
        const formData = Vue.ref({})

        // 提交表单
        const submitForm = () => {
            emit('submit', {...formData.value});
            // close();
        };

        // 关闭弹框
        const close = () => {
            emit('update:visible', false);
        };

        // 监听 departmentData 的变化，同步更新表单数据
        Vue.watch(() => props.departmentData, (newDepartmentData) => {
            formData.value = newDepartmentData? {...newDepartmentData} : {...initialValue};
        }, { immediate: true });

        // 返回表单数据及方法
        return {
            formData,
            submitForm,
            close
        };
    }
};